<template>
  <div class="details">
    <div class="leftArrow" @click="$router.back()">
      <span class="iconfont icon-bottom"></span>
    </div>
    <swiper>
      <img v-for="(item, index) in info.pics2" :key="index" :src="item" alt="" />
    </swiper>
    <div class="info">
      <p>{{ info.basicInfo.name }}</p>
      <p>{{ info.basicInfo.characteristic }}</p>
      <p>
        <span>
          <span style="color:red;margin-right:.2rem;">低价￥{{ info.basicInfo.minPrice }}</span>
          <span>原价￥{{ info.basicInfo.originalPrice }}</span>
        </span>
        <span>库存{{ info.basicInfo.stores }}</span>
      </p>
    </div>
    <div class="tabs">
      <div @click="active = 0" :class="active === 0 ? 'act' : ''">商品介绍</div>
      <div @click="active = 1" :class="active === 1 ? 'act' : ''">商品评价</div>
    </div>
    <div class="tabContent">
      <div
        class="jieshao"
        v-html="info.content"
        :style="{ display: active === 0 ? 'block' : 'none' }"
      ></div>
      <div class="pingjia" :style="{ display: active === 1 ? 'block' : 'none' }">
        <div class="item" v-for="(item, index) in reputation" :key="index">
          <div class="buddha"></div>
          <div class="comments">
            <div class="top">
              {{ item.user.nick ? item.user.nick : "匿名用户" }}
              <span>{{ item.goods.goodReputationStr }}</span>
            </div>
            <div class="middle">{{ item.goods.goodReputationRemark }}</div>
            <div class="bottom">
              <p>{{ item.goods.dateReputation }}</p>
              <p>选择规格：{{ item.goods.property }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="submit-bar">
      <div class="w">
        <div>
          <headset-one theme="outline" size="23" fill="#333" />
        </div>
        <div>
          <shopping theme="outline" size="23" fill="#333" />
        </div>
        <div>
          <star theme="outline" size="23" fill="#333" />
        </div>
        <div class="buy btn">立即购买</div>
        <div class="join btn" @click="showJoin = true">加入购物车</div>
      </div>
    </div>
    <div class="shadow" @click="showJoin = false" :class="showJoin ? 'show' : 'hide'"></div>
    <div class="dialog" :class="showJoin ? 'show' : 'hide'" v-if="info">
      <div class="top">
        <div><img :src="info.basicInfo.pic" alt="" /></div>
        <div class="center">
          <p>{{ info.basicInfo.name }}</p>
          <p style="color:#d00000;font-size:0.28rem;">￥{{ info.basicInfo.pingtuanPrice }}</p>
        </div>
        <div class="close" @click="showJoin = false">
          <p>X</p>
        </div>
      </div>
      <div class="middle">
        <div class="types" v-for="item in info.properties" :key="item.id">
          {{ item.name }}
          <div class="items">
            <span v-for="el in item.childsCurGoods" :key="el.id" @click="changeColor(el)">
              {{ el.name }}
            </span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>购买数量</div>
        <div>
          <button @click="count > 1 ? count-- : 1">-</button>
          <input type="text" v-model="count" />
          <button @click="count++">+</button>
        </div>
      </div>
      <div class="btn" @click="joinCart">加入购物车</div>
    </div>
  </div>
</template>

<script>
  import swiper from "../components/swiper"
  import axios from "../utils/axios/http"
  import { HeadsetOne, Shopping, Star } from "@icon-park/vue"
  export default {
    components: { swiper, HeadsetOne, Shopping, Star },
    computed: {
      color() {
        return (el) => {}
      },
    },
    data() {
      return {
        info: {},
        showJoin: false,
        count: 1,
        active: 0,
        reputation: [],
      }
    },
    methods: {
      joinCart() {
        let obj = {
          pic: this.info.basicInfo.pic,
          id: this.info.basicInfo.id,
          name: this.info.basicInfo.name,
          pri: this.info.basicInfo.minPrice,
          count: this.count,
          ckd: false,
        }
        this.$store.commit("addCart", obj)
        this.showJoin = false
      },
    },
    created() {
      let id = this.$route.query.id * 1
      axios
        .post("/small4/shop/goods/detail", {
          id,
        })
        .then((res) => {
          this.info = res.data.data
          console.log(this.info)
        })

      axios.post("/small4/shop/goods/reputation", { goodsId: id }).then((res) => {
        this.reputation = res.data.data
      })
    },
  }
</script>

<style lang="scss">
  .info {
    padding: 0.3rem;
    p {
      line-height: 0.6rem;
      &:first-child {
        font-size: 0.32rem;
      }
      &:nth-child(2) {
        color: #b8b8b8;
        font-size: 0.24rem;
      }
      &:last-child {
        display: flex;
        justify-content: space-between;
        color: #b8b8b8;
      }
    }
    border-bottom: 0.14rem solid #f5f5f5;
  }
  .swiper {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .m-attrList {
    font-size: 0.3rem;
    padding: 0.2rem 0.28rem 0;
    p {
      text-align: left !important;
    }
    p::after {
      content: "";
      display: block;
      clear: both;
    }
    span {
      margin-bottom: 0.3rem;
    }
  }
  .details {
    height: 100%;
    overflow-y: auto;
    font-size: 0.28rem;
    z-index: 99;

    .leftArrow {
      width: 0.6rem;
      height: 0.6rem;
      background-color: transparent;
      border: 1px solid #fff;
      border-radius: 50%;
      position: fixed;
      top: 10px;
      left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 4;
      span {
        transform: rotate(180deg);
        font-size: 0.48rem;
        color: #000;
        background-color: #fff;
        border-radius: 50%;
      }
    }
  }
  .submit-bar {
    height: 1rem;
    .w {
      width: 100%;
      height: 1rem;
      position: fixed;
      bottom: 0;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        flex-grow: 1;
        height: 100%;
        border-right: 0.01rem solid #e9e9e9;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        flex-grow: 0;
        font-size: 0.3rem;
        width: 2.14rem;
        height: 100%;
        &.join {
          background-color: #b7282e;
          color: #fff;
        }
      }
    }
  }
  .shadow {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    transition: 500ms;
    &.show {
      z-index: 9;
      opacity: 0.7;
    }
    &.hide {
      z-index: -1;
      opacity: 0;
    }
  }

  .dialog {
    position: fixed;
    justify-content: space-between;
    bottom: 0;
    width: 100%;
    // height: 6rem;
    z-index: 10;
    background-color: #fff;
    transition: transform 500ms;

    display: flex;
    flex-direction: column;
    &.show {
      transform: translateY(0);
    }
    &.hide {
      transform: translateY(100%);
    }
    .top {
      display: flex;
      margin: 0.2rem 0.3rem;
      justify-content: space-between;
      height: 1.6rem;
      .center {
        flex-grow: 1;
        margin: 0.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      img {
        width: 1.6rem !important;
        height: 1.6rem !important;
      }
      .close {
        width: 0.42rem;
        height: 0.42rem;
        text-align: center;
        line-height: 0.42rem;
      }
    }
    .middle {
      flex-grow: 1;
      border-top: 0.01rem solid #e9e9e9;
      border-bottom: 0.01rem solid #e9e9e9;
      .types {
        margin: 0.3rem;
      }
      .items {
        flex-wrap: wrap;
        display: flex;
        span {
          display: inline-block;
          border: 0.01rem solid #d9d9d9;
          padding: 0.16rem 0.2rem;
          margin-right: 0.2rem;
          margin-top: 0.2rem;
          border-radius: 0.1rem;
          &.red {
            border: 0.01rem solid red;
          }
        }
      }
    }
    .bottom {
      display: flex;
      margin: 0.2rem 0.3rem;
      font-size: 0.28rem;
      justify-content: space-between;
      align-items: center;
      button {
        width: 0.72rem;
        height: 0.72rem;
        border: none;
        outline: none;
        background-color: #f2f3f5;
        color: #323233;
        font-size: 0.56rem;
        // float: left;
        vertical-align: middle;
      }
      input {
        width: 0.8rem;
        height: 0.72rem;
        box-sizing: border-box;
        outline: none;
        border: none;
        vertical-align: middle;
        background-color: #f2f3f5;
        margin: 0 0.1rem;
        font-size: 14px;
        padding: 0 0.1rem;
        text-align: center;
      }
    }
    .btn {
      height: 0.88rem;
      line-height: 0.88rem;
      background-color: #b7282e;
      color: #fff;
      text-align: center;
      font-size: 0.32rem;
    }
  }
  .tabs {
    width: 100%;
    height: 1rem;
    display: flex;
    div {
      flex-basis: 50%;
      text-align: center;
      font-size: 0.32rem;
      line-height: 1rem;
      border-bottom: 0.05rem solid #ffffff;
      &.act {
        border-bottom: 0.05rem solid #ff0000;
      }
    }
  }
  .tabContent {
    .jieshao,
    .pingjia {
      display: none;
    }
    .jieshao {
      p {
        text-align: center;
      }
      img {
        width: 100% !important;
        height: auto !important;
        display: block;
      }
      a {
        width: auto !important;
      }
    }
    .item {
      display: flex;
      align-items: center;
      padding: 0.2rem;
      border-bottom: 0.01rem solid #e9e9e9;
      .buddha {
        background-color: #f2f3f5;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        margin-right: 0.2rem;
        flex-shrink: 0;
      }
      .comments {
        .top {
          display: flex;
          align-items: center;
          span {
            width: 0.8rem;
            height: 0.4rem;
            line-height: 0.4rem;
            background-color: #b7282e;
            color: #fff;
            display: inline-block;
            text-align: center;
            border-radius: 0.1rem;
            margin-left: 0.2rem;
            font-size: 0.24rem;
          }
        }
        .middle {
          margin: 0.2rem 0;
        }
        .bottom {
          color: gray;
          font-size: 0.26rem;
          display: flex;
          line-height: 0.36rem;
        }
      }
    }
  }
</style>
